<template lang="html">
  <section class="components-common_loading" style="z-index=999">
      <div class="logo-wrap">
        <i class="ic-loading"></i>
        <!-- <img src="../assets/logo.png" alt=""> -->
      </div>
  </section>
</template>

<script>
export default {
  name: 'CommonLoading',
}
</script>

<style lang="scss" scoped>
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.components-common_loading{
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .logo-wrap{
    width: 60px;
    height: 60px;
    border-radius: 100%;
    overflow: hidden;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    i{
      display: block;
      width: 50px;
      font-size: 50px;
      color: #fff;
      animation: rotate 2s linear infinite;
    }
    // img{
    //   display: block;
    //   width: 50px;
    //   animation: rotate 4s linear infinite;
    // }
  }
}
</style>
